<!DOCTYPE html>
<!-- saved from url=(0103)product.html -->
<html style="color: rgb(0, 0, 0); background-color: rgb(204, 232, 207);">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>产品详情页</title>
		<link rel="stylesheet" href="__HOME__/css/mui.min.css" />
		<link href="__HOME__/css/product.css" rel="stylesheet">
		<script src="__HOME__/js/jquery.min.js"></script>
		<script type="text/javascript" src="__HOME__/js/mui.min.js" ></script>
	<link href="__HOME__/swiper/swiper-3.4.2.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
.sys_spec_text li.selected  {border: 1px solid #e4393c;	}
#scj{width: 30%; height: 40px; line-height: 40px; float: left; display: block; text-align: center; font-size: 14px;}
.buy{width: 100%; height: 50px; background: #fff; border: 1px solid #e5e5e5; position: fixed; bottom: 0; left: 0;
z-index: 999;}
.gouwu{float: left; width: 50%; height: 100%; background: #ff9500;}
.gouwu a, .goumai a{display: block; font-size: 14px; color: #fff; text-align: center; line-height: 3rem;}
.goumai{float: left; width: 50%; height: 100%; background: #ff0036;}
.mui-pull-left a {display: block; width: 100%; height: 100%;}
</style>
	</head>

	<body class="mui-ios mui-ios-9 mui-ios-9-1" style="color: rgb(0, 0, 0); background-color: rgb(204, 232, 207);">
		<header class="mui-bar mui-bar-nav mui-bg">
			<div class="mui-pull-left">
				<a href="javascript:history.back(-1)" title=""><img class="xiao" src="__HOME__/images/top_arrowleft.png" style="width: 14px; height: 22px; margin-top: 14px;"></a>
			</div>
			<h1 class="mui-title">产品详情</h1>
			<div class="mui-pull-right">
			</div>
		</header>
		
		
		<div class="mui-content mui-content-cot sys_item_spec ">
			
			
				<div class="banner" >

			<div class="swiper-container">
				<div class="swiper-wrapper">
					{volist name="slider" id="v"}
					<div class="swiper-slide" style="width: 100%;height: 300px;">
						<image style="width: 100%;height:100%;" src="__PUBLIC__/{$v}"></image>
					</div>
					{/volist}
				</div>
			</div>

		</div>
			
			
			<div class="mui-product">
				<div class="mui-product-title">
					<p id="title">{$data.title}</p>
				</div>
				<!--<div class="mui-product-button"><button type="button" class="mui-btn mui-btn-danger mui-btn-orange"><img src="__HOME__/images/img.png" style="padding-right: 5px; vertical-align: middle;">图文详情</button></div>-->
				<div class="mui-product-money">
					<p><span id="scj">市场价￥<b class="sys_item_mktprice">{$data.price1}</b></span><b id="xianjia" class="sys_item_price">￥{$data.price2}</b><span id="xiaol">积分：{$data.jifen}　销量：{$data.dianji}</span></p>
				</div>
			</div>
			<div class="distance"></div>
			<div class="mui-content mui-content-pro">
				<ul id="list" class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" >
							<div class="safe-left">请选择商品数量及规格</div>
						</a>
					</li>
				</ul>
			</div>
			<!--添加部分-->
			
			<div class="guige">
				{volist name="shuxing" id="v"}
				<div class="cima sys_item_specpara" id="cima" >
					<div class="size">{$v.shuxing}</div>
					<ul class="sys_spec_text" id="dian">
						{volist name="$v.child" id="c" key="k"}
					
						<li  data-aid="{$c}"><a href="javascript:;" title="{$c}">{$c}</a></li>
					
						{/volist}
					</ul>
				</div>
				{/volist}
			</div>
		<style type="text/css">
			.rown{width: 100%;  border: 1px solid #e9e9e9; }
.number{width: 60%; height: 50px; float: right;padding-top: 10px;line-height: 40px;margin-bottom: 10px;}
.number .jia{width: 50%; height: 40px; color: #000000;  background: #e9e9e9; float: left;}
.number .jia p{font-size: 18px; width: 30%; height: 30px; float: left; text-align: center; line-height: 40px; margin-left: 2px;}
.number .Nprice{width: 50%; float: left; height: 30px; font-size: 13px;}
		</style>
		  
			<div class="rown">
				<div class="number">
					<div class="jia">
						<p id="jianhao">-</p><p id="num"></p><p id="jiahao">+</p>
					</div>
					<div  id="Nprice" class="Nprice">总价格￥222.25</div>
				</div>
			</div>
			<!--添加结束-->
			<!--<div class="distance" style="margin-top: 0px;"></div>-->
			<div class="mui-content">

				<div class="mui-content mui-content-pro">
					<div id="slider" class="mui-slider" data-slider="4">
						<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative mui-protitle">
							<a class="mui-control-item mui-active" href="product.html#item1mobile">
								图文详情
							</a>
						
						</div>
						<div class="mui-slider-group" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms;">
							<div id="item1mobile" class="mui-slider-item mui-control-content mui-active mui-product-img" style="padding-bottom: 80px;">
							   {$data.content}
							
							</div>
						</div>


					</div>
				</div>
			</div>
		</div>
		
			<!--添加的底部-->
	<div class="buy">				
		<div id="tianjia" class="gouwu"><a >加入购物车</a></div>
		<div class="goumai" id="addOrder"><a>立即购买</a></div>
	</div>
	</body>

</html>
<script type="text/javascript" src="__HOME__/layer/layer.js"></script>


	<script src="__HOME__/js/jquery.min.js"></script>

	<script src="__HOME__/swiper/swiper-3.4.2.min.js"></script>



<script>
	var mySwiper = new Swiper('.swiper-container', {
			autoplay: 5000,//可选选项，自动滑动
		})

//数量
var num = 1;
$('#num').text(num);
var Pprice ={$data.price2};
var sPrice;

sPrice = {$data.price2} *num;
		var str = "总价格￥："+sPrice;
		$('#Nprice').text(str);

//价格json
var sys_item={
	"mktprice":{$data.price1},
	"price":{$data.price2},
	"sys_attrprice":{$value}
	};
//console.log(sys_item);

//商品规格选择
$(function(){
	
	var Pval='';

	$(".sys_item_spec .sys_item_specpara").each(function(){
		var i=$(this);
		var p=i.find("ul>li");
     		
	 //默认选中第一个	
	
	   var str = $(this).find("li:first").attr('data-aid');
	 i.attr("data-attrval",str);
	 $(this).find("li:first").addClass("selected")
      getattrprice() 
		
		p.click(function(){
			console.log($(this))
			if(!!$(this).hasClass("selected")){
//				$(this).removeClass("selected");
//				i.removeAttr("data-attrval");
			}else{
				$(this).addClass("selected").siblings("li").removeClass("selected");
				i.attr("data-attrval",$(this).attr("data-aid"))
			}
			getattrprice() //输出价格
		})
	})
	
	
	
	
	//获取对应属性的价格
	function getattrprice(){
		var defaultstats=true;
		 var _val='';
		var _resp={
			mktprice:".sys_item_mktprice",
			price:".sys_item_price"
		}  //输出对应的class
		$(".sys_item_spec .sys_item_specpara").each(function(){
			var i=$(this);
			var v=i.attr("data-attrval");
			if(!v){
				defaultstats=false;
			}else{
				_val+=_val!=""?":":"";
				_val+=v;
			}
		})
		
		console.log(_val);//获取到商品的规格
		Pval = _val
		if(!!defaultstats){
			_mktprice=sys_item['sys_attrprice'][_val]['original_price'];
			_price=sys_item['sys_attrprice'][_val]['price'];
		}else{
			_mktprice=sys_item['mktprice'];
			_price=sys_item['price'];
		}
		//输出价格
		$(_resp.mktprice).text(_mktprice);  ///其中的math.round为截取小数点位数
		$(_resp.price).text(_price);
		Pprice = _price;
		
		sPrice = Pprice *num;
		var str = "总价格￥："+sPrice;
		$('#Nprice').text(str);
		
		console.log(_price)//获取到商品的价格
		
	}
		
		$("#tianjia").click(function(){
			
            var id = {$data.id};
         var value = {$value};
          
          			//请求到商品的信息
          			var good = {$good};
          			//已选商品数量
          			good['num'] = num;
          			//已选商品总价
          			good['sprice'] = sPrice;
          			//已选商品规格
          			good['guige'] = Pval;
          			
          			
	        $.ajax({
	            type : "POST",   /*以post形式向后台传递表单*/
	            url : "{:url('Car/add')}", /*数据传输的目的地址，将在这里对前台数据进行操作,且用的是后台Index控制器下的/ajaxsubmit方法*/
	            data :{'good':good},
	           	dataType:"json",
	            success : function(data) {
	        
	                    layer.msg(data['msg']); 
	                    
	              
	           
	              
	                },
	        })
          	
    
          	
          
      
		
	
	

		})
		
		
		$('#jianhao').click(function(){
			
			if(num>1){
				
				num--;
				$('#num').text(num);
				sPrice = Pprice *num;
		var str = "总价格￥："+sPrice;
		$('#Nprice').text(str);
				
			}
			
			
			
			
			
		})
		
		$('#jiahao').click(function(){
				
				
				num++;
				$('#num').text(num);
					sPrice = Pprice *num;
		var str = "总价格￥："+sPrice;
		$('#Nprice').text(str);
			
			
		})
		
		
		
		$('#addOrder').click(function(){
			var orderData={};
			      var good = {$good};
          			//已选商品数量
          			good['num'] = num;
          			//已选商品单价
          			good['sprice'] = Pprice;
          			//已选商品规格
          			good['guige'] = Pval;
          		
          			 
          			 //商品信息
          			 orderData['goods'] = [good];
          			 //商品总价
          			 orderData['sprice'] = sPrice;
          			 
          			//提交到后台创建订单
          			var url="{:url('Car/doorder')}"
          			$.post(url,orderData,function(res){
          				
          				if(res.code == 200){
          				
          				     
          				   
          				
          					window.location.href = "{:url('Car/orderpay')}"+"?orderId="+res.orderId;
          					
          				}else{
          					layer.msg(res.msg);
          				}
          				
          			})
          			
          			
          			
			
		})
		
		
		

})



</script>